<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>mobile-home</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">
    <link rel="stylesheet" href="css/mobile-home.css">
    

  </head>
  <body>
    <!-- 头部和脚部都是公共模版 -->
    <!-- 头部区域 -->
    <!-- 桌面屏幕 -->
    <div id="header" class="visible-md-block visible-lg-block hidden-xs hidden-sm">
        <nav id="navbar">
            <div class="container">
                <div class="navbar-header">
                    <a href="" class="navbar-brand">LOGO</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <img src="image/home/icon-a.png" alt="">
                        <a href="mobile-login.html">登录</a>
                    </li>
                    <li>
                        <img src="image/home/icon-b.png" alt="">
                        <a href="mobile-list.html">注册</a>
                    </li>
                </ul>
            </div>
        </nav>
        <nav id="subnavbar">
            <div class="container">
                <ul class="nav navbar-nav">
                    <li><a href="mobile-home.html">首页</a></li>
                    <li><a href="mobile-list.html">美食菜单</a></li>
                    <li><a href="mobile-health.html">健康养生</a></li>
                    <li><a href="mobile-user.html">个人中心</a></li>
                </ul>
                <form class="navbar-form navbar-right form" action="/" method="get">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索美食、健康养身">
                        <div class="input-group-btn">
                            <button class="btn btn-primary" type="submit">
                                <img src="image/list/icon.png" alt="">
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </nav>
    </div>
    <!-- 移动设备 -->
    <nav class="visible-xs-block visible-sm-block hidden-md hidden-lg">
        <div class="container">
            <form action="" class="">
                <div class="row">
                    <a href="" class="col-xs-3 col-sm-2 text-left">LOGO</a>
                    <div class="form-group col-xs-7 col-sm-9">
                        <input class="form-control" type="text" placeholder="搜索美食、健康养身">
                        <i class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></i>
                    </div>
                    <a class="col-xs-2 col-sm-1 text-right" href="">登录</a>
                </div>
            </form>
        </div>
    </nav>
    <!-- 身体区域 -->
    <!-- 桌面屏幕 -->
    <div id="home" class="visible-lg-block visible-md-block hidden-xs hidden-sm ">
      <div class="container">
        <!-- banner区 -->
        <section class="banner-content">
          <!-- 选项卡 -->
          <!-- 胶囊式标签页 -->
          <ul class="nav nav-pills nav-stacked" id="banner-menu">
            <li role="presentation"><img src="image/home/icon-2.png" alt="">家常美食</li>
            <li role="presentation"><img src="image/home/icon-3.png" alt="">甜点饮品</li>
            <li role="presentation"><img src="image/home/icon-5.png" alt="">美食地图</li>
            <li role="presentation"><img src="image/home/icon-5.png" alt="">健康资讯</li>
            <li role="presentation"><img src="image/home/icon-6.png" alt="">养生妙方</li>
            <li role="presentation"><img src="image/home/icon-8.png" alt="">名家专访</li>
          </ul>
          <div class="banner-menu-content">
            <!-- 这是一个模版，可以重复使用 -->
            <div class="banner-menu-item">
              <!-- 需要遍历数组才可以更新数据 -->
              <dl class="clearfix" id="banner-menu-cooking">
                <dt>菜系</dt>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
                <dd><a href="">川菜</a></dd>
              </dl>
              <dl class="clearfix" id="banner-menu-type">
                <dt>类型</dt>
                <dd><a href="">主食</a></dd>
                <dd><a href="">主食</a></dd>
                <dd><a href="">主食</a></dd>
                <dd><a href="">主食</a></dd>
                <dd><a href="">主食</a></dd>
              </dl>
              <dl class="clearfix" id="banner-menu-scene">
                <dt>场景</dt>
                <dd><a href="">早餐</a></dd>
                <dd><a href="">早餐</a></dd>
                <dd><a href="">早餐</a></dd>
                <dd><a href="">早餐</a></dd>
              </dl>
            </div>
          </div>
          <div class="banner-swiper">
            <div class="swiper-container" id="swiper3">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <a href=""><img src="image/home/未标题-1.jpg" alt=""></a>
                </div>
                <div class="swiper-slide">
                  <a href=""><img src="image/home/未标题-2.jpg" alt=""></a>
                </div>
                <div class="swiper-slide">
                  <a href=""><img src="image/home/未标题-3.jpg" alt=""></a>
                </div>
                <div class="swiper-slide">
                  <a href=""><img src="image/home/未标题-4.jpg" alt=""></a>
                </div>
                <div class="swiper-slide">
                  <a href=""><img src="image/home/未标题-5.jpg" alt=""></a>
                </div>
              </div>
              <div  id="b-p" class="swiper-pagination swiper-pagination-white"></div>
            </div>
          </div>
        </section>
        <section class="food-content">
          <div class="content-title">
            <div class="row">
              <div  class="col-md-4 col-lg-4 title-item"></div>
              <div  class="col-md-4 col-lg-4 title-item">美食菜单</div>
              <div  class="col-md-4 col-lg-4 title-item"></div>
            </div>
          </div>
          <div class="food-content-picture">
            <div class="row">
              <figure  class="col-md-4 col-lg-4 food-content-item">
                <a href=""><img src="image/home/food-1.jpg" alt=""></a>
              </figure>
              <figure  class="col-md-4 col-lg-4 food-content-item">
                <div class="row">
                  <figure  class="col-md-12 col-lg-12 food-picture-item">
                    <a href="">
                      <img src="image/home/food-2.jpg" alt="">
                      <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                    </a>
                  </figure>
                  <figure  class="col-md-12 col-lg-12 food-picture-item">
                    <a href="">
                      <img src="image/home/food-3.jpg" alt="">
                      <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                    </a>
                  </figure>
                </div>
              </figure>
              <figure  class="col-md-4 col-lg-4 food-content-item">
                <div class="row">
                  <!-- 可以使用模版替换循环，减少代码数 -->
                  <ul  class="col-md-12 col-lg-12 food-picture-item">
                    <!-- <li><a href="">一提到烘焙，很多人的第一反应总是甜。</a></li>
                    <li><a href="">一提到烘焙，很多人的第一反应总是甜。</a></li>
                    <li><a href="">一提到烘焙，很多人的第一反应总是甜。</a></li>
                    <li><a href="">一提到烘焙，很多人的第一反应总是甜。</a></li>
                    <li><a href="">一提到烘焙，很多人的第一反应总是甜。</a></li>
                    <li><a href="">一提到烘焙，很多人的第一反应总是甜。</a></li> -->
                  </ul>
                  <figure  class="col-md-12 col-lg-12 food-picture-item">
                    <a href="">
                      <img src="image/home/food-4.jpg" alt="">
                      <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                    </a>
                  </figure>
                </div>
              </figure>
            </div>
          </div>
        </section>
        <section class="health-content">
          <div class="content-title">
            <div class="row">
              <div  class="col-md-4 col-lg-4 title-item"></div>
              <div  class="col-md-4 col-lg-4 title-item">健康养生</div>
              <div  class="col-md-4 col-lg-4 title-item"></div>
            </div>
          </div>
          <div class="health-content-picture">
            <!-- 此处可以用模版替代 -->
            <div class="row">
              <figure class="col-md-3 col-lg-3 health-picture-item">
                <a href="">
                  <img src="image/home/health-1.jpg" alt="">
                  <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                </a>
              </figure>
              <figure class="col-md-3 col-lg-3 health-picture-item">
                <a href="">
                  <img src="image/home/health-2.jpg" alt="">
                  <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                </a>
              </figure>
              <figure class="col-md-3 col-lg-3 health-picture-item">
                <a href="">
                  <img src="image/home/health-3.jpg" alt="">
                  <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                </a>
              </figure>
              <figure class="col-md-3 col-lg-3 health-picture-item">
                <a href="">
                  <img src="image/home/health-4.jpg" alt="">
                  <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                </a>
              </figure>
            </div>
          </div>
          <div class="health-content-text">
            <div class="row">
              <!-- <ul class="col-lg-4 health-text-item">
                <li><a href="">午餐也是十分重要的一餐</a></li>
                <li><a href="">午餐也是十分重要的一餐</a></li>
                <li><a href="">午餐也是十分重要的一餐</a></li>
              </ul>
              <ul class="col-lg-4 health-text-item">
                <li><a href="">午餐也是十分重要的一餐</a></li>
                <li><a href="">午餐也是十分重要的一餐</a></li>
                <li><a href="">午餐也是十分重要的一餐</a></li>
              </ul>
              <ul class="col-lg-4 health-text-item">
                <li><a href="">午餐也是十分重要的一餐</a></li>
                <li><a href="">午餐也是十分重要的一餐</a></li>
                <li><a href="">午餐也是十分重要的一餐</a></li>
              </ul>
              <ul class="col-lg-4 health-text-item">
                <li><a href="">午餐也是十分重要的一餐</a></li>
                <li><a href="">午餐也是十分重要的一餐</a></li>
                <li><a href="">午餐也是十分重要的一餐</a></li>
              </ul> -->
            </div>
          </div>
        </section>
        <section class="like-content">
          <div class="content-title">
            <div class="row">
              <div  class="col-md-4 col-lg-4 title-item"></div>
              <div  class="col-md-4 col-lg-4 title-item">猜你喜欢</div>
              <div  class="col-md-4 col-lg-4 title-item"></div>
            </div>
          </div>  
          <div class="like-content-picture">
            <div class="swiper-container" id="swiper4">
              <div class="swiper-wrapper">
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/like-1.jpg" alt="">
                    <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                  </a>
                </figure>
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/like-2.jpg" alt="">
                    <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                  </a>
                </figure>
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/like-3.jpg" alt="">
                    <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                  </a>
                </figure>
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/like-1.jpg" alt="">
                    <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                  </a>
                </figure>
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/like-2.jpg" alt="">
                    <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                  </a>
                </figure>
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/like-3.jpg" alt="">
                    <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                  </a>
                </figure>
              </div>
              <div  id="l-p" class="swiper-button-prev"></div>
              <div  id="l-n" class="swiper-button-next"></div>
            </div>
          </div>       
        </section>
      </div>  
    </div>
    
    <!-- 移动设备 -->
    <div id="mobile-home" class="visible-xs-block visible-sm-block hidden-md  hidden-lg">
      <!-- 轮播图 -->
      <div class="mobile-banner-content">
        <div class="swiper-container" id="swiper1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href=""><img src="image/home/未标题-1.jpg" alt=""></a>
            </div>
            <div class="swiper-slide">
              <a href=""><img src="image/home/未标题-2.jpg" alt=""></a>
            </div>
            <div class="swiper-slide">
              <a href=""><img src="image/home/未标题-3.jpg" alt=""></a>
            </div>
            <div class="swiper-slide">
              <a href=""><img src="image/home/未标题-4.jpg" alt=""></a>
            </div>
            <div class="swiper-slide">
              <a href=""><img src="image/home/未标题-5.jpg" alt=""></a>
            </div>
          </div>
          <div id="m-b-p" class="swiper-pagination swiper-pagination-white"></div>
        </div>
      </div>
      <div class="mobile-food-content">
        <div class="container">
          <div class="mobile-content-title">
            <div class="row">
              <div  class="col-xs-3 col-sm-5 mobile-title-item"></div>
              <div  class="col-xs-6 col-sm-2 mobile-title-item">
                <i></i>
                <span>美食菜单</span>
                <i></i>
              </div>
              <div  class="col-xs-3 col-sm-5 mobile-title-item"></div>
            </div>
          </div>
          <div class="mobile-food-picture">
            <figure class="mobile-food-item">
              <a href="">
                <img src="image/home/mobile-1.jpg" alt="">
                <figcaption>粗粮细作:&nbsp;健康能量燕麦甜品</figcaption>
              </a>
            </figure>
            <figure class="mobile-food-item">
              <a href="">
                <img src="image/home/mobile-2.jpg" alt="">
                <figcaption>粗粮细作:&nbsp;健康能量燕麦甜品</figcaption>
              </a>
            </figure>
            <figure class="mobile-food-item">
              <a href="">
                <img src="image/home/mobile-3.jpg" alt="">
                <figcaption>粗粮细作:&nbsp;健康能量燕麦甜品</figcaption>
              </a>
            </figure>
          </div>
        </div>
      </div>
      <div class="mobile-health-content">
        <div class="container">
          <div class="mobile-content-title">
            <div class="row">
              <div  class="col-xs-3 col-sm-5 mobile-title-item"></div>
              <div  class="col-xs-6 col-sm-2 mobile-title-item">
                <i></i>
                <span>健康养生</span>
                <i></i>
              </div>
              <div  class="col-xs-3 col-sm-5 mobile-title-item"></div>
            </div>
          </div>
          <!-- 图片可以用js循环，让代码更简洁 -->
          <!-- 文字部分可以做一些动态效果 -->
          <div class="mobile-health-picture">
            <div class="row">
              <figure  class="col-xs-6 col-sm-6 mobile-health-item">
                <a href="">
                  <img src="image/home/mobile-4.jpg" alt="">
                  <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                </a>
              </figure>
              <figure  class="col-xs-6 col-sm-6 mobile-health-item">
                <a href="">
                  <img src="image/home/mobile-5.jpg" alt="">
                  <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                </a>
              </figure>
            </div>
            <div class="row">
              <figure  class="col-xs-6 col-sm-6 mobile-health-item">
                <a href="">
                  <img src="image/home/mobile-6.jpg" alt="">
                  <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                </a>
              </figure>
              <figure  class="col-xs-6 col-sm-6 mobile-health-item">
                <a href="">
                  <img src="image/home/mobile-7.jpg" alt="">
                  <figcaption>粗粮细作：健康能量燕麦甜品</figcaption>
                </a>
              </figure>
            </div>
          </div>
        </div>
      </div>
      <div class="mobile-like-content">
        <div class="container">
          <div class="mobile-content-title">
            <div class="row">
              <div  class="col-xs-3 col-sm-5 mobile-title-item"></div>
              <div  class="col-xs-6 col-sm-2 mobile-title-item">
                <i></i>
                <span>猜你喜欢</span>
                <i></i>
              </div>
              <div  class="col-xs-3 col-sm-5 mobile-title-item"></div>
            </div>
          </div>
          <div class="mobile-like-picture">
            <div class="swiper-container" id="swiper2">
              <div class="swiper-wrapper">
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/mobile-8.jpg" alt="">
                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                  </a>
                </figure>
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/mobile-9.jpg" alt="">
                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                  </a>
                </figure>
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/mobile-8.jpg" alt="">
                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                  </a>
                </figure>
                <figure class="swiper-slide">
                  <a href="">
                    <img src="image/home/mobile-9.jpg" alt="">
                    <figcaption><span>粗粮细作：健康能量燕麦甜品</span></figcaption>
                  </a>
                </figure>
              </div>
              <div  id="l-s-p" class="swiper-button-prev swiper-button-black"></div>
              <div  id="l-s-n" class="swiper-button-next swiper-button-black"></div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 脚部区域 -->
    <!-- 桌面屏幕 -->
    <div id="footer" class="visible-md-block visible-lg-block hidden-xs hidden-sm">
        <div class="footer-content">
            <div class="container">
                <div class="row">
                    <div class="footer-about col-md-5 col-lg-5">
                        <h3>益海嘉里</h3>
                        <p>益海嘉里旗下拥有“金龙鱼”、“欧丽薇兰”、“胡姬花”、“香满园”、 “海皇”、“丰苑”、“金味”、“锐龙”、“绿涤”、“洁劲100”等著名品牌，产品涵盖了小包装食用油、大米、面粉、挂面、米粉、豆奶、餐饮专用粮油、食品原辅料。</p>
                    </div>
                    <div class="footer-contacts col-md-5 col-lg-5">
                        <h3>联系我们</h3>
                        <p>电话：400-616-5757 <br>
                            传真：0755-61864755 <br>
                            邮箱：zhangsan@qq.com <br>
                            地址：中国上海浦东新区陆家嘴环路958号华能联合大厦26楼 <br>
                        </p>
                    </div>
                    <figure class="footer-wechat col-md-2 col-lg-2">
                        <img src="image/home/wechat.jpg" alt="">
                        <figcaption>微信公众号</figcaption>
                    </figure>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container text-center">
                <p>
                    <a  class="first" href="mobile-.html">首页</a>
                    <a href="mobile-list.html">美食地图</a>
                    <a href="mobile-health.html">健康养生</a>
                    <a  class="last" href="mobile-user.html">个人中心</a>
                </p>
                <p>2017版权所有：本网站信息属于益海嘉里 版权所有 Copyright © 2009 京 ICP 备 12025066 号 -1</p>
            </div>
        </div>
    </div>
    <!-- 移动设备 -->
    <div id="mobile-footer" class="visible-xs-block visible-sm-block hidden-md hidden-lg">
        <div class="container">
            <ul class="">
                <li class="active"><a href="mobile-home.html">首页</a></li>
                <li><a href="mobile-list.html">美食菜单</a></li>
                <li><a href="mobile-health.html">健康养生</a></li>
                <li><a href="mobile-user.html">个人中心</a></li>
            </ul>
        </div>
    </div>
    
    <script data-main="js/main" src="js/require.js"></script>

  </body>
</html>